<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>
</head>

<body>

<div th:replace="~{fragment/header :: head}"></div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div th:replace="~{fragment/menu :: left}"></div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件" th:value="${query}" id="query">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning" onclick="goPage(1)"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;" onclick="deleteAll()"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                    <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='add.html'"><i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox" onclick="checkAll(this)" /></th>
                                <th>账号</th>
                                <th>名称</th>
                                <th>创建时间</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="user,iterStat : ${result.data}">
                                <td th:text="${iterStat.count}">1</td>
                                <td><input type="checkbox" th:value="${user.id}"/></td>
                                <td th:text="${user.account}">Lorem</td>
                                <td th:text="${user.userName}">ipsum</td>
                                <td th:text="${user.createTime}">dolor</td>
                                <td>
                                    <button type="button" class="btn btn-success btn-xs" th:onclick="assignRole([[${user.id}]])"><i class=" glyphicon glyphicon-check"></i></button>
                                    <button type="button" class="btn btn-primary btn-xs" th:onclick="goEdit([[${user.id}]])"><i class=" glyphicon glyphicon-pencil"></i></button>
                                    <button type="button" class="btn btn-danger btn-xs" th:onclick="deleteOne([[${user.id}]])"><i class=" glyphicon glyphicon-remove"></i></button>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <ul class="pagination">
                                        <li th:class="${result.isFirstPage} ? 'disabled' : '' "><a href="#" onclick="pageChange(-1)">上一页</a></li>
                                        <li th:each="num : ${#numbers.sequence(1, result.totalPage)}" th:class="${result.page == num} ? 'active' : ''"><a href="#" th:text="${num}" th:onclick="goPage([[${num}]])">1</a></li>
                                        <li th:class="${result.isLastPage} ? 'disabled' : '' "><a href="#" onclick="pageChange(1)">下一页</a></li>
                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/script/docs.min.js}"></script>
<script th:src="@{/layer/layer.js}" type="text/javascript"></script>
<script th:inline="javascript" type="text/javascript">
    var ctxPath = [[${application.ctxPath}]];
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });

    function pageChange(step) {
        console.log(step);
        var page = [[${result.page}]] + step
        console.log(page);
        if (page > [[${result.totalPage}]]) {
            return;
        }
        if (page < 1) {
            return;
        }
        window.location.href = ctxPath + "/user/list?page=" + page + "&query=" + $("#query").val();
    }

    function goPage(page) {
        console.log(page);
        window.location.href = ctxPath + "/user/list?page=" + page + "&query=" + $("#query").val();
    }
    function checkAll(obj) {
        console.log(obj.checked);
        $("tbody input[type='checkbox']").each(function(){
            $(this).prop("checked", obj.checked);
        });
    }
    function deleteAll() {
        var ids = [];
        $("tbody input:checked").each(function(){
            ids.push(Number($(this).val()));
        });
        console.log(ids);
        if (ids.length == 0) {
            layer.msg(xhr.responseJSON, { time: 2000, icon: 5, shift: 6 }, function () { });
            return;
        }
        $.ajax({
            url: ctxPath + "/user/doDelete?ids=" + ids.join(","),
            type: "POST",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: "{}",
            success: function (result) {
                console.log(result);
                window.location.href = ctxPath + "/user/list";
            },
            error: function (xhr) {
                console.log(xhr);
                layer.msg(xhr.responseJSON, { time: 2000, icon: 5, shift: 6 }, function () { });
            }
        })
    }

    function deleteOne(id) {
        console.log(id);
        $.ajax({
            url: ctxPath + "/user/doDelete?ids=" + id,
            type: "POST",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: "{}",
            success: function (result) {
                console.log(result);
                window.location.href = ctxPath + "/user/list";
            },
            error: function (xhr) {
                console.log(xhr);
                layer.msg(xhr.responseJSON, { time: 2000, icon: 5, shift: 6 }, function () { });
            }
        });
    }

    function goEdit(id) {
        console.log(id);
        window.location.href = ctxPath + "/user/edit?id=" + id;
    }

    function assignRole(id) {
        console.log(id);
        window.location.href = ctxPath + "/user/assignRole?id=" + id;
    }
</script>
</body>
</html>
